<template>
	<view class="con-box">
        <view class="con-item">
            <block v-for="(item, index) in list">
                <view class="item" v-if="index % 2 === 0" @click="openDetail">
                    <img class="img" :src="item.url" alt="" mode="widthFix" />
                    <view class="title">惊喜大礼包～</view>
                    <view class="price-box flex">
                        <view class="price"> 0 </view>
                        积分起拍
                    </view>
                </view>
            </block>
        </view>
        <view class="con-item">
        <block v-for="(item, index) in list">
                <view class="item" v-if="index % 2 === 1" @click="openDetail">
                    <img class="img" :src="item.url" alt="" mode="widthFix" />
                    <view class="title">惊喜大礼包～</view>
                    <view class="price-box flex">
                        <view class="price"> 0 </view>
                        积分起拍
                    </view>
                </view>
            </block>
        </view>
    </view>
    
    <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
            <div class="block" />
        </div>
    </van-overlay>
	
</template>

<script lang="ts">

	export default {
        name:"fuli",
		data() {
			return {
				title: 'Hello',
				isLogin: false,
				list:[
                    {"url":"/src/static/0.jpg","title":"貂蝉"},
                    {"url":"/src/static/1.jpg","title":"悟空"},
                    {"url":"/src/static/2.jpg","title":"凯皇"},
                    {"url":"/src/static/shop.jpg","title":"测试"},
                ],
				code: '', //传入的需要助力的code
				shareCode: '', //当前用户的分享 code
				assistanceImgs:[],//助力人员头像
				qqMember:false,//是否可以领取qq会员
				acceptPrize:false,//是否可以领取奖品
                show:false
			}
		},
		onLoad() {

		},
		methods: {
            openDetail: function() {
              this.show = true;
            }
		}
	}
</script>

<style scoped>

.con-box {
    width: 686px;
    margin: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 100px;
}
.con-item .item {
    margin-bottom: 32px;
}
.con-item .item .img {
    width: 327px;
    background-color: white;
    border-radius: 16px;
}
.con-item .item .title {
    font-size: 30px;
    color: #333;
    font-weight: 700;
}
.con-item .item .price-box {
    margin-top: 8px;
    font-size: 26px;
    color: #666;
    line-height: 48px;
    align-items: end;
}
.con-item .item .price-box .price {
    font-size: 36px;
    color: #b7a26c;
    margin-right: 8px;
}




 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>
